<template>
  <div class="template">
    <Form ref="addForm" :label-width="150">
        <Tabs type="card" v-model="activeName">
            <TabPane v-for="(item,index) in form" :label="item.group" :name="item.group" :key="index">
                <FormItem v-for="(items,i) in item.items" :key="i" :label="items.title" :prop="items.name">
                   <div>
                    <Input clearable
                    v-if="items.type=='string'"
                    v-model="items.content"
                    maxlength="20"
                    :placeholder="items.comment"                    
                    style="width:300px"
                    ></Input>

                    <i-switch v-if="items.type=='boolean'" true-value="1" false-value="0" v-model="items.content" />
             
                    <!-- <editor  ref="editor" v-model="FullgiftForm.introduction" editorId="content" @on-change="editChange" /> -->
                    <editor v-if="items.type=='html'"  :ref="`editor${items.name}`" v-model="items.content" :editorId="items.name" @on-change="editChange(arguments,index,i,items.name)" />
                  </div>
                  <div>{{items.comment}}</div>
                </FormItem>

            </TabPane>
        </Tabs>

         <Button
        type="primary"
        style="width: 90px;"
        @click="modalConfirm"
        >保存</Button>
    </Form>
  </div>
</template>

<script>
import {
  manageUpdate,
  manageVariables
} from '@/api/system/system-config.js'
import Editor from "_c/editor";
export default {
  name: 'product-infor',
  components: { Editor },
  data () { 
    return {
      content:'',
      query: {},
      form:null,
      activeName:'',
    }
  },
  computed: {
  },
  methods: {

      editChange(argument, index,i,name) {
        var res = argument[0]
        var text = argument[1]
        console.log(res,text,index,i,name)
         if (res == "<p><br></p>") {
          this.form[index].items[i].content = res;
            return;
          }
      this.form[index].items[i].content = res;
    },
    // 获取表格数据
    getVariables () {
      this.$store.commit('setSpinShow', true)
      manageVariables().then((res) => {
        this.form=res.data
          this.activeName=res.data[0].group
      }).finally(() => this.$store.commit('setSpinShow', false))
    },
    modalConfirm () {
       var that = this;
      var item=[]
      this.form.forEach(v=>{
       v.items.forEach(value=>{
          var list={
            name:value.name,
            content:value.content,
          }
          item.push(list)
       })
      })
      var param = {
        items: item
      };
      this.$refs['addForm'].validate(valid => {
        if (valid) {
           manageUpdate(param).then(res => {
              this.$Message.success('保存成功')
              this.getVariables()
            })
        }
      })
    },
  

  },
   mounted () {
    this.getVariables()
  },
  beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
}
</script>

<style scoped lang="less">

</style>
